<template>
    <div id="login">
        <div id="login-container">
            <el-divider>登录</el-divider>

            <el-form :model="loginForm" status-icon :rules="validRules" ref="loginForm">
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" placeholder="请输入用户名" @keyup.enter.native="formCheck()"></el-input>
                </el-form-item>
                <el-form-item  prop="password">
                    <el-input type="password" v-model="loginForm.password" placeholder="请输入密码" autocomplete="off" @keyup.enter.native="formCheck()"></el-input>
                </el-form-item>

                <div id="other-links">
                    <router-link class="link" to="/password_reset">忘记密码？</router-link>
                    <router-link class="link" to="/register">注册</router-link>
                </div>

                <el-form-item>
                    <el-button id="login-btn" type="primary" @click="formCheck()">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { login } from '@/api/account.js';

export default {
    name: 'Login',
    data() {
        let validateNotNull = (label) => {
            return (rule, value, callback) => {
                if(value == "") {
                    return callback(new Error(`${label}不能为空`));
                } else {
                    callback();
                }
            }
        }
        return {
            loginForm: {
                username: "",
                password: "",
            },
            validRules: {
                username: [
                    {validator: validateNotNull("用户名"), trigger: 'blur'}
                ],
                password: [
                    {validator: validateNotNull("密码"), trigger: 'blur'}
                ]
            }
        }
    },
    methods: {
        login() {
            const _this = this;
            login(this.loginForm.username, this.loginForm.password).then(res => {
                let status = res.data.status;
                let modules = res.data.modules;
                if(status == 1){
                    this.$message.success('登录成功');
                    localStorage.setItem('username', this.loginForm.username);  //储存登入用户信息
                    
                    // 设置该用户显示的模块名称
                    localStorage.setItem('modules', modules)

                    this.$router.replace('/home');  //跳转至系统首页
                } else {
                    this.$message.error('登录失败')
                }
            });
        },
        formCheck() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.login();
                } else {
                    return false;
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
    @import "@/assets/css/main.scss";

    #login{
        background-color:  $color_bg;
        width: 100%;
        height: 100%;
        @include flex-center();
    }
    #login-container {
        width: 292px;
        position: relative;
        top: -50px;
        .el-divider__text {
            background-color: $color_bg;
            color: $color_font;
            font-size: 20px;
        }

        #login-btn {
            width: 100%;
            background-color: $color_primary;

            &:hover {
                background-color: lighten($color_primary, 10%);
            }
        }

        #other-links {
            display: flex;
            justify-content: space-between;
            margin-bottom: 14px;
            .link {
                color: $color_font;
                font-size: 14px;
                
                &:hover {
                    color: $color_primary;
                }
            }
        }
    }
</style>